
function $(selector) {
    return document.querySelector(selector)
}
var doms = {
    container: $('.container'),
    aside: $('.aside'),
    main: $('.main'),
    asideList: $('.aside-list'),
    // 折叠菜单
    shousuo: $('.main .iconfont.shousuo'),
    // 消息
    msg: $('.header-info .msg'),
}





function toggleh2(target) {
    target.classList.toggle('hidden')
}

function toggleUl(target) {

    if (target.clientHeight >0) {
        target.classList.add('hidden')
        target.style.height = '0'
    } else {
        target.classList.remove('hidden')
        var totalHeight = target.children.length * 50
        target.style.height = totalHeight + 'px'
    }
}


function bindEvents() {
    // asideList 点击 
    doms.asideList.onclick = function (e) {
        var target = e.target
        if (target.tagName === 'H2') {
            console.log(target);
            var h2 = target
            var nextUl = h2.nextElementSibling
            // 隐藏ul
            toggleUl(nextUl)

            // 修改箭头
            toggleh2(h2)
        }
    }

    // 侧边栏
    doms.shousuo.onclick = taggleAside

    // 鼠标在消息上就不滚动
    for (var i = 0; i <= doms.msg.children.length -1; i++) {
        doms.msg.children[i].onmouseenter = stopMsg
        doms.msg.children[i].onmouseleave = startMsg
    }

}
// 侧边栏展开或收缩
function taggleAside() {
    function closeAside() {
        doms.container.style.gridTemplateColumns = '0 1fr'
        doms.aside.style.width = '0'
        doms.main.style.marginLeft = '0'
        doms.shousuo.classList.replace('icon-shousuo','icon-zhankai')
    }

    function openAside() {
        doms.container.style.gridTemplateColumns = '200px 1fr'
        doms.aside.style.width = '200px'
        doms.main.style.marginLeft = '200px'
        doms.shousuo.classList.replace('icon-zhankai','icon-shousuo')
    }
    if (doms.aside.clientWidth > 0) {
        closeAside()
    } else {
        openAside()
    }
}

// 消息下一个
var msgs = ['Lorem ipsum dolor sit.11111111', 'Lorem ipsum dolor sit.2', 'Lorem ipsum dolor sit.3','Lorem ipsum dolor sit.4']
var next 
var time = 0
// PENDING,RUNNING, END
var state = 'PENDING'

function nextMsg() {
    if (state === 'RUNNING') {
        return 
    }
    state = 'RUNNING'
    doms.msg.firstElementChild.ontransitionend = function (e) {
        state = 'END'
    }
    time++
    next = doms.msg.firstElementChild.clientHeight * time
    doms.msg.firstElementChild.style.transition = 'all 1s'
    doms.msg.firstElementChild.style.marginTop = -next + 'px'
    if (time === msgs.length) {
        doms.msg.firstElementChild.ontransitionend = function (e) {
            doms.msg.firstElementChild.style.transition = 'all 0s'
            doms.msg.firstElementChild.style.marginTop = '0'
            state = 'END'
        }
        // 如果最后一次，先立即切换到第1个位置，再进行切换。
        next = 0
        time = 0
        // 瞬间回到第1个位置
    }
}
var timerId = null
function startMsg() {
    timerId && clearInterval(timerId)
    timerId = setInterval(function () {
        nextMsg()
    },2000)
}

function stopMsg() {
    clearInterval(timerId)
    timerId = null 
}


function init() {
    for (var i =0; i<=msgs.length-1; i++) {
        var li = document.createElement('li')
        li.innerHTML = msgs[i]
        doms.msg.appendChild(li)
    }
    startMsg()

    // 无缝滚动
    var firstNode = doms.msg.firstElementChild.cloneNode(true)
    doms.msg.appendChild(firstNode)
}

init()
bindEvents()